<template>
	<view class="commodity" :style="'flex-wrap:'+ wrap">
		<!-- 单个商品组件 -->
		<view class="commodity-item" v-for="(item,index) in commodityData" :key="index" :style="{'width':itemW+'rpx'}">
			<image class="commodity-img" :src="item.src" mode="" :style="{'width':itemW+'rpx','height':itemH+'rpx'}">
			</image>
			<view class="commodity-content" :style="'font-size:'+ titleFont+'rpx;'">
				<text class="content-title">{{item.contentTitle}}</text>
				<view class="money">
					<text class="pprice">￥{{item.pprice}}</text>
					<text class="oprice">￥{{item.oprice}}</text>
				</view>
				<text class="discount">{{item.discount}}折</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			commodityData: {
				type: Array,
				default: () => ([])
			},
			itemW: { //单个商品宽度--一行放几个，750设计稿
				type: Number,
				default: 375
			},
			itemH: { //单个商品高度--一行放几个，750设计稿
				type: Number,
				default: 400
			},
			wrap: {
				type: String,
				default: 'wrap'
			},
			titleFont: {
				type: Number,
				default: 30
			}
		},
		onShow() {},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.commodity {
		display: flex;
		// flex-wrap: wrap;
		width: 750rpx;

		.commodity-item {
			// width: 375rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.commodity-img {
				// width: 375rpx;
				// height: 400rpx;
			}

			.commodity-content {
				width: 100%;
				text-align: center;

				.content-title {
					font-weight: 500;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
					padding: 6rpx 20rpx;
				}

				.money {
					margin: 10rpx 0;

					.pprice {
						color: black;
						font-weight: 600;
					}

					.oprice {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through; //中划线
					}
				}

				.discount {
					padding: 4rpx 10rpx;
					color: red;
					border: 2rpx solid red;
					border-radius: 5rpx;
					font-size: 24rpx;
				}

			}
		}
	}
</style>